<template>
	<view>
		<!-- openAddInput点击的右上角的发布 -->
		<uni-nav-bar :border="false" :fixed="true" @clickRight="openAddInput" :style="'margin-top:'+statusBarHeight+'px;'">
			<view class="flex align-center justify-center font-weight-bold w-100">
				<view class=" mx-1" v-for="(item,index) in tabBars" :key="index" :class="index===tabIndex ? 'text-main font-lg' :'font-md text-light-muted'"
				 @click="changeTab(index)">{{item.name}}</view>

			</view>
			<text slot="right" class="iconfont icon-fatie_icon"></text>
		</uni-nav-bar>

		<swiper :current="tabIndex" :duration="150" :style="'height:'+scrollH+'px;'" @change="onChangeTab">
			<!-- 横向滚动数据  好比轮播图 -->
			<!-- 关注内容 -->
			<swiper-item>
				<scroll-view :style="'height:'+scrollH+'px;'" scroll-y="true" @scrolltolower="loadmoreEvent">
					<block v-for="(item,index) in list" :key="index">
						<!-- @doSupport="doSupport"顶和踩 -->
						<CommonList :item="item" :index="index" @doSupport="doSupport"></CommonList>
						<divider></divider>
					</block>
					<load-more :loadmore="loadmore"></load-more>
				</scroll-view>

			</swiper-item>
			<!-- 话题内容 -->
			<swiper-item>
				<scroll-view :style="'height:'+scrollH+'px;'" scroll-y="true">
					<!-- 热门分类 -->
					<hot-cate :hotCate="hotCate"></hot-cate>
					<!-- 搜索框 -->
					<view class="p-2">
						<view class="bg-light rounded flex align-center justify-center py-2 text-secondary">
							<text class="iconfont icon-sousuo mr-2"></text>搜索话题
						</view>
					</view>
					<!-- 轮播图 -->
					<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="px-2">
						<swiper-item>
							<image src="../../static/demo/banner1.jpg" mode="" style="height: 300rpx;" class="w-100 rounded"></image>
						</swiper-item>

					</swiper>
					<divider></divider>
					<!-- 最近更新 -->
					<view class="p-2 font-md">
						最近更新
					</view>
					<!-- 话题列表组件 -->
					<block v-for="(item,index) in topicList" :key="index">
						<topic-list :item="item" :index="index"></topic-list>
					</block>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	const demo = [{
			username: "昵称",
			userpic: "/static/topboy.png", //头像
			newstime: "2020-12-10下午4.30", //时间
			isFollow: false, //判断当前用户是否已经关注
			title: "我是标题", //标题
			titlepic: "/static/demo/banner2.jpg", //标题下的图片

			support: {
				// 点赞 反赞
				type: "",
				support_count: 0,
				unsupport_count: 0,
			},
			// 评论
			comment_count: 0,
			// 分享
			share_num: 0,
		},
		{
			username: "昵称",
			userpic: "/static/topboy.png", //头像
			newstime: "2020-12-10下午4.30", //时间
			isFollow: false, //判断当前用户是否已经关注
			title: "我是标题", //标题
			titlepic: "/static/demo/banner2.jpg", //标题下的图片

			support: {
				// 点赞 反赞
				type: "",
				support_count: 0,
				unsupport_count: 0,
			},
			// 评论
			comment_count: 0,
			// 分享
			share_num: 0,
		},
		{
			username: "昵称",
			userpic: "/static/topboy.png", //头像
			newstime: "2020-12-10下午4.30", //时间
			isFollow: false, //判断当前用户是否已经关注
			title: "我是标题", //标题
			support: {
				// 点赞 反赞
				type: "",
				support_count: 0,
				unsupport_count: 0,
			},
			// 评论
			comment_count: 0,
			// 分享
			share_num: 0,
		},
	];
	import uniNavBar from '@/components/uni-ui/uni-nav-bar/uni-nav-bar.vue'
	import CommonList from '@/components/common/common-list.vue'
	import LoadMore from "@/components/common/load-more.vue"
	import hotCate from "@/components/news/hot-cate.vue"
	import topicList from "@/components/news/topic_list.vue"
	export default {
		components: {
			uniNavBar,
			CommonList,
			LoadMore,
			hotCate,
			topicList
		},
		 
		data() {
			return {
				scrollH: 500, //默认的可视内容高度
				tabIndex: 0,
				statusBarHeight:0,
				tabBars: [{
						name: "关注"
					},
					{
						name: "话题"
					}
				],
				list: [],
				loadmore: "上拉加载更多",
				hotCate: [{
						name: "关注"
					},
					{
						name: "推荐"
					},
					{
						name: "体育"
					},
					{
						name: "热点"
					},
					{
						name: "财经"
					},
					{
						name: "娱乐"
					},
				],
				topicList: [{
						cover: "/static/demo/topicpic/1.jpeg",
						title: "#话题名称#",
						desc: "话题描述",
						today_count: 0,
						news_count: 10
					},
					{
						cover: "/static/demo/topicpic/1.jpeg",
						title: "#话题名称#",
						desc: "话题描述",
						today_count: 0,
						news_count: 10
					},
					{
						cover: "/static/demo/topicpic/1.jpeg",
						title: "#话题名称#",
						desc: "话题描述",
						today_count: 0,
						news_count: 10
					}
				]
			}
		},
		// 页面加载计算高度
		onLoad() {
			// API设备接口  
			// 状态栏就是手机自带的wifi  电量显示区域statusBarHeight
			// 导航栏navigationBarHeight 顶部导航
			uni.getSystemInfo({
				success: (res) => {
					// 内容可使用区域=可使用窗口的高度-状态栏-导航栏
					this.scrollH = res.windowHeight - res.statusBarHeight - 44;
					this.statusBarHeight=res.statusBarHeight;
				}
			});
			this.list = demo;
		},
		methods: {
			// current 改变时会触发 @change事件 
			// current是当前的滑块所在的index ===tabIndex

			onChangeTab(e) {
				console.log(e)
				this.tabIndex = e.detail.current
			},
			// 切换选项卡事件
			changeTab(index) {
				this.tabIndex = index;
			},
			// 打开发布页
			openAddInput() {
				uni.navigateTo({
					url: "../add-input/add-input",
				})
			},
			// 控制点赞踩的事件处理
			doSupport(e) {
				console.log(e.index, e.type);
				// let list = this.newsList[this.tabIndex].list;
				let item = this.list[e.index];
				let msg = e.type === "support" ? "顶" : "踩";
				// 	// 未顶踩
				if (item.support.type === "") {
					// // 增加加踩的数量
					item.support[e.type + "_count"]++;
				}
				// 已经顶 但是你点的踩
				else if (item.support.type === "support" && e.type === "unsupport") {
					// 顶--
					item.support.support_count--;
					item.support.unsupport_count++;
					// 已经踩 但是你点的顶
				} else if (item.support.type === "unsupport" && e.type === "support") {
					// 把踩-1
					item.support.unsupport_count--;
					// 顶+1
					item.support.support_count++;
				}
				// 获取最新的
				item.support.type = e.type;
				uni.showToast({
					title: msg,
				});
			},
			// 上拉加载更多
			loadmoreEvent() {

				// 问题1 在请求数据(加载中)反复触发下拉事件会多次请求数据
				if (this.loadmore !== "上拉加载更多") {
					//!== "加载更多"就是正在加载中 什么也不做不可以再次触发下拉事件
					return;
				}
				// 滚动到底部触发上拉加载事件修改为加载中
				this.loadmore = "加载中...";
				// console.log("测试加载中-00000");
				// 2s模拟获取数据之后修改为状态加载更多
				setTimeout(() => {
					this.list = [...this.list, ...this.list];
					this.loadmore = "上拉加载更多";
				}, 4000);
			},
		}
	}
</script>

<style>
 
</style>
